<template>
  <div style="padding:20px;">
    <div style=" background: #fff;padding:20px 10px;">
      <!-- 头部搜索区 -->
       <el-row :gutter="30">
  <el-form :model="listForm" label-width="100px">
  <el-col :span="6"><div class="grid-content ">
    <el-form-item label="标签名称"><el-input v-model="listForm.tags"></el-input></el-form-item></div></el-col>
  <el-col :span="6"><div class="grid-content ">
      <el-form-item label="城市">
    <el-select v-model="provinces" placeholder="请选择">
    <el-option
      v-for="(item,index) in optionsCity"
      :key="index+312312"
      :label="item"
      :value="index">
    </el-option>
  </el-select>

 </el-form-item></div></el-col>
  <el-col :span="6"><div class="grid-content ">
    <el-form-item label="地区">
          <el-select v-model="citys" placeholder="请选择">
    <el-option
      v-for="(item,index) in optionsCitys"
      :key="index+3123112"
      :label="item"
      :value="index">
    </el-option>
  </el-select>
      </el-form-item></div></el-col>
  <el-col :span="6"><div class="grid-content ">
    <el-form-item label="企业简称"><el-input v-model="listForm.shortName"></el-input></el-form-item></div></el-col>
      <el-col :span="6"><div class="grid-content ">
    <el-form-item label="状态">
        <el-select v-model="listForm.state" placeholder="请选择">
    <el-option
      v-for="item in  stateOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </el-form-item></div></el-col>
    </el-form>
    <el-col :span="6"><div class="grid-content ">
      <el-button size="medium" style="margin-left:55px" @click="clear">清除</el-button>
      <el-button type="primary" size="medium" @click="list">搜索</el-button>
      </div></el-col>
    <el-col :span="6"><div class="grid-content "></div></el-col>
    <el-col :span="6"><div class="grid-content ">
      <el-button icon="el-icon-edit" size="medium" type="success" style="margin-left:170px"  @click="formAdd">新增用户</el-button></div></el-col>
       <el-col :span="24"><div class="grid-content bg-purple-dark tiaoshu" >
        <i class="el-icon-info" style="margin-right:5px"></i>共{{counts}}条记录</div></el-col>
      </el-row>
      <!-- 底部内容区 -->
      <el-table :data="tableData">
        <el-table-column label="序号" type="index"  width="100" align='center'></el-table-column>
        <el-table-column label="企业编号"  prop="number" align='center'></el-table-column>
        <el-table-column label="企业简称" prop="shortName" align='center'></el-table-column>
        <el-table-column label="标签" prop="tags" align='center'></el-table-column>
        <el-table-column label="创建者" prop="creatorID" align='center'></el-table-column>
        <el-table-column label="创建日期" prop="addDate" align='center'></el-table-column>
        <el-table-column label="备注" prop="remarks" align='center'></el-table-column>
        <el-table-column label="状态" prop="state" align='center'></el-table-column>
        <el-table-column label="操作"  align='center' width="200">
          <template #default='{row}'>
             <el-button type="primary" icon="el-icon-edit" plain circle @click="formAlter(row)"></el-button>
               <el-tooltip class="item" effect="dark" :content="row.state==='禁用'?'启用':'禁用'" placement="top">
              <el-button v-if="row.state==='禁用'" type="success" icon="el-icon-check" plain circle @click="launch(row)"></el-button>
              <el-button  v-else type="warning"  icon="el-icon-close" plain circle @click="launch(row)"></el-button>
              </el-tooltip>
              <el-button type="danger" icon="el-icon-delete" plain circle @click="remove(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
           <div style="margin-top:15px; text-align:right">
              <el-pagination
                 background
                 layout="prev, pager, next,sizes,jumper"
                 :total="total"
                 :current-page="currentPage"
                 :page-sizes="[10, 20, 30, 50]">
              </el-pagination>
           </div>
     <!-- 新增和修改 -->
   <el-dialog
     :title="title"
     :visible.sync="dialogVisible"
     width="50%"
     @close="formClose"
     >

     <div style=" padding:0 120px 0  40px">
       <el-form :model="formCity" :rules="rules" ref="formCity" label-width="150px"  >
      <el-form-item label="企业名称" prop="shortName">
        <el-input width='100px'  v-model="formCity.shortName"></el-input>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input width='100px'  v-model="formCity.company"></el-input>
        <span>https://www.tianyancha.com （在此可查询所属公司全称及简称）</span>
      </el-form-item>
      <div style="display: flex;justify-content: space-between;">
        <el-form-item label="城市地区" style="width:400px" prop="province">
      <div style=" width:100%; ">
                <el-select
          style="margin-right: 4%;"
          v-model.trim="formCity.province"
          placeholder="请选择"
          @change="changeFn"
        >
          <el-option
            v-for="(item, index) in optionsCity"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      </el-form-item>
      <el-select  v-model="formCity.city" placeholder="请选择">
          <el-option
            v-for="(item, index) in citysList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>
       <el-form-item label="方向（企业标签）" prop="tags">
        <el-input width='100px' v-model="formCity.tags"></el-input>
      </el-form-item>
       <el-form-item label="备注" prop="remarks">
        <el-input width='100px' v-model="formCity.remarks"></el-input>
      </el-form-item>
     </el-form>
     </div>

      <div style="text-align: center;">
        <span slot="footer" class="dialog-footer" >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addForm">确 定</el-button>
      </span>
      </div>
    </el-dialog>
    </div>

  </div>
</template>

<script>

import { list, remove, disabled, add, detail, update } from '@/api/hmmm/companys'
import { citys, provinces } from '@/api/hmmm/citys'

export default {
  data () {
    return {
      counts: '', // 总数
      total: 1,
      currentPage: 1,
      listForm: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      provinces: null, // 所有市
      optionsCity: provinces(), // 所有城市
      citys: '', // 所有县
      optionsCitys: '',
      stateOptions: [{
        value: '1',
        label: '启用'
      }, {
        value: '0',
        label: '禁用'
      }], // 状态
      dialogVisible: false,
      title: '',
      citysList: [], // 地区
      formCity: {
        province: '', // 城市
        city: '', // 地区
        isFamous: true
      },
      rules: {
        shortName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }

        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请输入标签', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '备注不能为空', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    provinces: {
      handler (newVal) {
        const city = this.optionsCity[newVal]
        this.listForm.province = city
        this.optionsCitys = citys(city)
      }
    },
    citys: {
      handler (newVal) {
        const city = this.optionsCitys[newVal]
        this.listForm.city = city
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.listForm)
      this.counts = data.counts
      this.tableData = data.items
      this.tableData.forEach(item => {
        item.state === 1 ? item.state = '启用' : item.state = '禁用'
      })
      this.total = data.pages
    },
    clear () {
      this.listForm = {
        page: 1,
        pagesize: 10
      }
      this.provinces = ''
      this.citys = ''
    },
    // 确认删除
    // 提示
    remove (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.list()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 启用禁用
    launch (row) {
      const jq = row.state
      let ts = ''
      jq === '禁用' ? ts = '启用' : ts = '禁用'
      this.$confirm(`是否${ts}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          id: row.id,
          state: null
        }
        jq === '禁用' ? data.state = 1 : data.state = 0
        await disabled(data)
        this.list()
        this.$message({
          type: 'success',
          message: `已成功${jq}!`
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增
    formAdd () {
      this.title = '创建用户'
      this.formCity = {
        province: '', // 城市
        city: '', // 地区
        isFamous: true
      }
      this.dialogVisible = true
    },
    // 选择城市的方法
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.formCity.province)
      this.formCity.city = this.citysList[0]
    },
    // 确定按钮
    addForm () {
      this.$refs.formCity.validate(async (valid) => {
        if (valid) {
          if (this.title === '创建用户') {
            await add(this.formCity)
            this.$message.success('创建成功')
          } else {
            this.formCity.isFamous = true
            update(this.formCity)
            this.$message.success('修改成功')
          }
          this.list()
          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    // 修改
    async formAlter (row) {
      this.title = '编辑用户'
      const data = { id: row.id }
      const { data: res } = await detail(data)
      console.log(res)
      this.formCity = res
      this.dialogVisible = true
    },
    // 关闭新增框
    formClose () {
      this.$refs.formCity.resetFields()
      this.formCity.city = ''
      // // 清空
      // this.formCity = {
      //   province: '', // 城市
      //   city: '', // 地区
      //   isFamous: true
      // }
    }
  },
  components: {
    // SelectCity
  }

}
</script>

<style scoped lang='scss'>
  .el-row {

    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .tiaoshu{
    display: flex;
    align-items: center;
    padding-left:10px ;
  }
 ::v-deep .el-table th.el-table__cell{
    background-color: #fafafa !important;
  }

 </style>
